<template>
	<view>
		<qi-navtabbar :navzuoicof="'icon-icon-test59'">
			<view slot="left"></view>
			<view slot="center"></view>
		</qi-navtabbar>
		<!-- vidodata -->
		<scroll-view scroll-y class="scrollheihgt" :scroll-into-view="bottomId">
			<view class="listgoods">
				<view class="itemmy">
					<view class="imgmy">
						<image class="itemimg" src="/static/icons/me.png"></image>
					</view>
					<view class="itemtext">加油</view>
				</view>
				<view v-if="Object.keys(vidodata).length !== 0">
					<view class="rightme" v-for="item in vidodata">
						<view class="imgmy">
							<image class="itemimg" :src="vuex_user.avatar_url"></image>
						</view>
						<view class="itemtext" v-if="item.text">
							{{ item.text }}
						</view>
						<view class="itemtext " v-else @tap="tapgetduration(item)"
							:style="{ paddingRight: item.duration / 1000 + '%' }">
							<view class="iconfont icon-yuyin1"></view>
						</view>
					</view>
				</view>
				<!-- <view class="rightme" v-for="item in vidodata" >
					<view class="imgmy">
						<image class="itemimg" :src="vuex_user.avatar_url"></image>
					</view>
					<view class="itemtext " :style="{paddingRight: (item.duration)/1000 + '%'}" >
						<view class="iconfont icon-yuyin1"></view>
					</view>
						</view> -->
			</view>

			<view :id="'p'+ vidodata.length"></view>
		</scroll-view>
		<imvoice @myvoice="myvoice" @inputinformation="inputinformation" />
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import imvoice from './im-voice.vue';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {
			imvoice
		},
		data() {
			return {
				text: 'uni-app',
				voicePath: '',
				bottomId: '',
				popishow: false,
				voicedata: [],
				haha: [{
						time: 1600
					},
					{
						time: 4200
					}
				]
			};
		},
		computed: {
			// 语音小于10秒 都返回最小长度15%
			// 语音长度随语音秒数变化
			...mapState('m_imvido', ['vidodata'])
		},
		onLoad(val) {
			// 校验用户是否登录(未登录退出执行其他操作)
			if (!this.$u.utils.isLogin()) return;
		},

		methods: {
			...mapActions('m_imvido', ['addactionim']),
			...mapMutations('m_imvido', ['IMVIDOACTION']),
			myvoice() {
				this.popishow = true;
				console.log('开始录音');
				recorderManager.start();
			},
			// 取消
			tapClickpop() {
				this.popishow = false;
				recorderManager.onStop(function(res) {});
				recorderManager.stop();
				console.log('取消');
			},
			inputinformation() {
				console.log(this.vidodata.length);
				console.log(this.vidodata);
				this.$nextTick(() => {
					this.bottomId = 'p' + this.vidodata.length; //如循环则获取最后一个 不循环则无需
				})
				console.log(2131);
			},
			// 发送
			Tapsubvoice() {
				this.popishow = false;
				let self = this;
				recorderManager.onStop(function(res) {
					self.addactionim(JSON.stringify(res));
					console.log('recorder stop' + JSON.stringify(res));
					self.voicePath = res.tempFilePath;
				});
				recorderManager.stop();

				console.log('发送');
			},
			tapgetduration(val) {
				if (val.tempFilePath) {
					innerAudioContext.src = val.tempFilePath;
					innerAudioContext.play();
				}
			},
			startRecord() {
				console.log('开始录音');
				recorderManager.start();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					console.log(this.voicePath);
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			clickpath(val) {
				innerAudioContext.src = val;
				innerAudioContext.play();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.centerbox {
			height: calc(100vh - 240rpx);
			background: rgba(0, 0, 0, 0.5);
		}

		.bottomsub {
			display: flex;
			height: 100rpx;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, #3388ee, #4db9f1);
			color: #f8f8f8;
		}
	}

	.listgoods {
		padding: 20rpx;
	}

	.itemmy {
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;

		.itemimg {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
			border-radius: 50%;
		}

		.itemtext {
			// width: calc(100vw - 200rpx);
			background-color: chartreuse;
			// margin-left: 80rpx;
			word-wrap: break-word;
			word-break: break-all;
			position: relative;
			font-size: 16rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;
			border-radius: 10rpx;

			&::before {
				content: '';
				display: block;
				width: 0;
				height: 0;
				border: 10rpx solid pink;
				border-color: transparent;
				border-right-color: chartreuse;
				position: absolute;
				left: -18rpx;
				top: 18rpx;
				box-sizing: border-box;
			}
		}
	}

	.rightme {
		padding: 20rpx 0;
		display: flex;
		flex-direction: row-reverse;

		.itemimg {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
			border-radius: 50%;
		}

		.itemtext {
			// width: calc(100vw - 200rpx);
			background-color: chartreuse;
			margin-left: 80rpx;
			word-wrap: break-word;
			word-break: break-all;
			position: relative;
			font-size: 16rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;
			border-radius: 10rpx;

			&::before {
				content: '';
				display: block;
				width: 0;
				height: 0;
				border: 10rpx solid pink;
				border-color: transparent;
				border-left-color: chartreuse;
				position: absolute;
				right: -18rpx;
				top: 18rpx;
				box-sizing: border-box;
			}
		}
	}

	.itempath {
		background-color: red;
		border-bottom-left-radius: 90px;
		border-top-left-radius: 90px;
	}

	.scrollheihgt {
		height: calc(100vh - 100px);
		// #ifdef MP
		height: calc(100vh - 240rpx - var(--window-bottom) - 20px);
		// #endif
	}
</style>